<template>
	<view>
		<view class="head">
			<view class="top">
				<view class="arrow">
				</view>
				<view style="color: white; font-size: 48rpx;">立即预约</view>
			</view>
			<uni-card>
				<view style="display: flex;justify-content: space-between;">
					<view style="font-size: 5vw;font-weight: 600;">
						维修方式
					</view>
					<view>
						<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
							<u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name"
								:name="item.name" @change="radioChange" :iconSize="1" :labelSize="14"
								:customStyle="{marginLeft: '8px'}">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</uni-card>
			<uni-card style="text-align: left;">
				<view style="font-size: 3vh; font-weight: 600;margin-bottom: 1vh;">
					客户信息
				</view>
				<view style="border: 4rpx solid #F7F7F7">
				</view>
				<view style="display: flex; justify-content: space-between; margin-top: 2vh;">
					<view style="width: 25vw;"><u-tag shape="circle" size="large" text="车主姓名"></u-tag></view>
					<view style="width: 53vw;"> <u--input placeholder="请输入车主姓名" shape="circle" clearable></u--input>
					</view>
				</view>
				<view style="display: flex; justify-content: space-between; margin-top: 2vh;">
					<view style="width: 25vw;"><u-tag shape="circle" size="large" text="联系方式"></u-tag></view>
					<view style="width: 53vw;"> <u--input placeholder="请输入联系方式" shape="circle" clearable></u--input>
					</view>
				</view>
				<view style="display: flex; justify-content: space-between; margin-top: 2vh;">
					<view style="width: 25vw;"><u-tag shape="circle" size="large" text="预约时间"></u-tag></view>
					<view style="width: 53vw;"> <u--input placeholder="请输入预约时间" shape="circle" clearable></u--input>
					</view>
				</view>
			</uni-card>
			<uni-card style="text-align: left;">
				<view style="font-size: 3vh; font-weight: 600;margin-bottom: 1vh;">
					车辆信息
				</view>
				<view style="border: 4rpx solid #F7F7F7">
				</view>
				<view style="display: flex; justify-content: space-between; margin-top: 2vh;">
					<view style="width: 25vw;"><u-tag shape="circle" size="large" text="车辆类型"></u-tag></view>
					<view style="width: 53vw;" @click="showSex = true; hideKeyboard()">
						<u--input v-model="model1.userInfo.sex" placeholder="点击选择车辆类型" shape="circle"
							clearable></u--input>
					</view>
				</view>
				<view style="display: flex; justify-content: space-between; margin-top: 2vh;">
					<view style="width: 25vw;"><u-tag shape="circle" size="large" text="车牌号"></u-tag></view>
					<view style="width: 53vw;"> <u--input placeholder="请输入车牌号" shape="circle" clearable></u--input>
					</view>
				</view>
			</uni-card>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择车辆类型" 
				@close="showSex = false" @select="sexSelect">
			</u-action-sheet>
			<uni-card style="text-align: left;">
				<view style="font-size: 3vh; font-weight: 600;margin-bottom: 1vh;">
					照片
				</view>
				<view style="border: 4rpx solid #F7F7F7"/>
				<view style="margin-top: 3vw; display: flex;align-items: center;">
					<view style="width: 35vw;font-size: 4vw; ">整车图片：</view>
					<view style="width: 60vw; "><uni-file-picker ></uni-file-picker></view>
				</view>
				<view style="margin-top: 3vw; display: flex;align-items: center;">
					<view style="width: 35vw;font-size: 4vw; ">维修部位照片：</view>
					<view style="width: 60vw;"><uni-file-picker ></uni-file-picker></view>
				</view>
			</uni-card>
			<view class="bottom"><u-button shape="circle" customStyle="color:white;width:60vw;background-color: #0662E6;">提交</u-button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				actions: [{
						name: '宝马',
					},
					{
						name: '奔驰',
					},
					{
						name: '大众',
					},
				],
	
				// 基本案列数据
				radiolist1: [{
						name: '到店维修',
						disabled: false
					},
					{
						name: '上门取车',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '到店维修',
			}
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			}
		},
	}
</script>

<style>
	.popup-content {
		padding: 20px;
		background-color: #fff;
	}

	.top {
		background-color: #2F81FA;
		width: 100%;
		height: 20%;
		position: fixed;
		position: relative;
		text-align: center;
		padding-top: 4%;
		box-sizing: border-box;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: absolute;
		left: 3%;
	}

	.head {
		position: relative;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>